<template>
  <div class="app-container">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="0" :xs="0">
          <div class="h_left">
            <div class="label">访问账号</div>
            <div>您好！欢迎使用淄博市地方征信平台</div>
            <div>您上次的登录时间：2021-06-18</div>
            <div class="label"> <i class="el-icon-view"></i> 快速链接 </div>
            <div class="history">
              <el-timeline>
                <el-timeline-item placement="bottom" v-for="(item,index) in visitedViews" :key="index">
                  <el-card>
                    <h4>{{item.title}} - 淄博市地方征信平台</h4>
                    <p class="fr">于 {{item.ptime}} 访问</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-col>
        <el-col :span="24" :xs="24">
          <div class="h_right">
            <div class="h_date f14">截止统计日期: {{new Date().toLocaleString()}}</div>
            <div class="chart-container">
              <PieChart :cData="d8" ref="c8" id="c8" height="100%" width="45%" />
              <PieChart :cData="d9" ref="c9" id="c9" height="100%" width="45%" />
            </div>
            <div class="chart-container">
              <PieChart :cData="d10" ref="c10" id="c10" height="100%" width="45%" />
              <template height="90%" width="45%">
                <el-table
                    :data="d4"
                    style="width: 100%"
                    border
                    :header-cell-style="{background:'#f5f9ff'}">
                  <el-table-column
                      prop="SSHY"
                      label="行业"
                      min-width="10%"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="hb"
                      label="不良担保债务余额环比变化"
                      min-width="25%"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="count"
                      label="涉及企业（家）"
                      min-width="35%"
                      align="center">
                  </el-table-column>
                </el-table>
              </template>
            </div>
            <div class="chart-container">
              <PieChart :cData="d12" ref="c12" id="c12" height="100%" width="45%" />
              <template height="90%" width="45%" >
                <el-table
                    :data="d5"
                    style="width: 100%"
                    border
                    :header-cell-style="{background:'#f5f9ff'}">
                  <el-table-column
                      prop="SSQU"
                      label="区域"
                      min-width="10%"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="hb"
                      label="不良担保债务余额环比变化"
                      min-width="10%"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="count"
                      label="涉及企业（家）"
                      min-width="10%"
                      align="center">
                  </el-table-column>
                </el-table>
              </template>
            </div>
            <div class="chart-container">
              <PieChart :cData="d14" id="c14" height="100%" width="45%" />
              <PieChart :cData="d15" id="c15" height="100%" width="45%" />
            </div>
            <!-- <div class="chart-container">
              <PieChart :cData="d16" id="c16" height="100%" width="45%" />
              <PieChart :cData="d17" id="c17" height="100%" width="45%" />
            </div> -->
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog :title="title" class="read" :visible.sync="readOpen"  width="900px" append-to-body>
      <div class="dbMsg">
          <el-table
            :data="dbCompanyList"
            style="width: 100%"
            border
            :header-cell-style="{background:'#f5f9ff'}">
          <el-table-column
              prop="QYMC"
              label="担保企业名称"
              min-width="10%"
              align="center">
              <template slot-scope="scope">
                <span class="comName" @mouseenter="openDetails(scope.row)" @mouseleave="innerVisible = false">{{scope.row.QYMC}}</span>
              </template>
          </el-table-column>
          <el-table-column
              prop="count"
              label="担保记录（条）"
              min-width="10%"
              align="center">
          </el-table-column>
          <el-table-column
              prop="dbzw"
              label="担保债务额度（万元）"
              min-width="10%"
              align="center">
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <!--担保 关系图 -->
        <div class="inner" v-show="innerVisible">
          <div id="main" style="width: 540px;height:200px;"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import Chart from '@c/Charts/LineMarker';
import BarChart from '@c/Charts/BarChart';
import PieChart from '@c/Charts/PieChart.vue';
import MoreChart from "@c/Charts/MoreChart";
import MapChart from "@c/Charts/MapChart";
import {getDanbao,getMutualInfo } from "@/api/chart";
export default {
  components: {
    MapChart,
    MoreChart,
    Chart,
    BarChart,
    PieChart
  },
  data() {
    return {
      tabNum: '1',
      readOpen:false,
      title:'',
      type:undefined,
      total:0,
      currentPage:1,
      pageSize:10,
      dbCompanyList:[],
      innerVisible:false,
      d4:[], 
      d5:[],
      d8: {
        title: '担保债务余额',
        cLabel: [],
        cData: []
      }, 
      d9: {
        title: '',
        cLabel: [],
        cData: []
      }, 
      d10: {
        title: '不良担保债务余额行业分布',
        cLabel: [],
        cData: []
      }, 
      d12: {
        title: '不良担保债务余额区域分布',
        cLabel: [],
        cData: []
      }, 
      d14: {
        title: '互相担保信贷余额',
        cLabel: [],
        cData: []
      }, 
      d15: {
        title: '',
        cLabel: [],
        cData: []
      }, 
      d16: {
        title: '循环担保信贷余额',
        cLabel: ['一般行业', '批发行业', '计算机&电子产品', '零售行业', '制造业', '纺织业'],
        cData: [{
          value: 60.00,
          name: '一般行业'
        },
          {
            value: 16.13,
            name: '批发行业'
          },
          {
            value: 12.16,
            name: '计算机&电子产品'
          },
          {
            value: 7.10,
            name: '零售行业'
          },
          {
            value: 3.87,
            name: '制造业'
          },
          {
            value: 0.65,
            name: '纺织业'
          }
        ]
      }, d17: {
        title: '',
        cLabel: ['一般行业', '批发行业', '计算机&电子产品', '零售行业', '制造业', '纺织业'],
        cData: [{
          value: 60.00,
          name: '一般行业'
        },
          {
            value: 16.13,
            name: '批发行业'
          },
          {
            value: 12.16,
            name: '计算机&电子产品'
          },
          {
            value: 7.10,
            name: '零售行业'
          },
          {
            value: 3.87,
            name: '制造业'
          },
          {
            value: 0.65,
            name: '纺织业'
          }
        ]
      }
    }
  },
  mounted() {
    this.getData();
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    },
  },
  methods: {
    handleClick(e) {
      // debugger
    },
    openDetails(row){
      this.innerVisible = true;
      let children = [];
      let len = row.dbInfo.length;
      for(let i=0;i<len;i++){
        let index = children.findIndex(item=>{
          return item.name == row.dbInfo[i].qymc
        })
        if(index>-1){
          children[index].children.push({
              name:`担保金额：${(row.dbInfo[i].DKJE/10000).toFixed(2)}万元,`+`担保方式：${row.dbInfo[i].DBFS}`
          })
        }else{
          children.push({
            name: row.dbInfo[i].qymc,
            children:[
              {
                name:`担保金额：${(row.dbInfo[i].DKJE/10000).toFixed(2)}万元,`+`担保方式：${row.dbInfo[i].DBFS}`
              }
            ]
          }) 
        }
      }
      const data = {
        name: row.QYMC,
        children: children
      };
      this.treeChart(data);
    },
    initPage(){
      this.currentPage = 1;
      this.pageSize = 10;
    },
    getMutualGuarantee(val){
      let params = {
        pageNum:this.currentPage,
        pageSize:this.pageSize,
        searchField:val
      }
      getMutualInfo(params).then(res=>{
        console.log(res)
        this.dbCompanyList = res.data.records.map(item=>{
          let sum = item.dbInfo.map(ite=>ite.DKJE).reduce((cur,prev)=>cur+prev,0)
          return {
            QYMC:item.QYMC,
            count:item.count,
            dbzw:(sum/10000).toFixed(2),
            dbInfo:item.dbInfo
          }
        })
        this.total = Number(res.data.total);
      });
    },
    handleSizeChange(val){
      this.pageSize = val;
      this.getMutualGuarantee(this.type);
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.getMutualGuarantee(this.type);
    },
    toFix(val){
      return (val/10000).toFixed(2);
    },
    getData(){
      getDanbao().then(res=>{
        console.log(res)
        for(let i=0;i<res.data.guaranteeByMode.length;i++){
          this.d8.cLabel.push(res.data.guaranteeByMode[i].DBFS)
          this.d8.cData.push({value:res.data.guaranteeByMode[i].total,name:res.data.guaranteeByMode[i].DBFS})
        }
        this.$refs.c8.initChart(this.d8);
        for(let j=0;j<res.data.guaranteeByFive.length;j++){
          this.d9.cLabel.push(res.data.guaranteeByFive[j].fiveLet)
          this.d9.cData.push({value:res.data.guaranteeByFive[j].total,name:res.data.guaranteeByFive[j].fiveLet})
        }
        this.$refs.c9.initChart(this.d9);
        for(let k=0;k<res.data.badTotalByHY.length;k++){
          this.d10.cLabel.push(res.data.badTotalByHY[k].SSHY)
          this.d10.cData.push({value:this.toFix(res.data.badTotalByHY[k].total),name:res.data.badTotalByHY[k].SSHY})
        }
        this.$refs.c10.initChart(this.d10);
        for(let l=0;l<res.data.badTotalByQU.length;l++){
          this.d12.cLabel.push(res.data.badTotalByQU[l].SSQU)
          this.d12.cData.push({value:this.toFix(res.data.badTotalByQU[l].total),name:res.data.badTotalByQU[l].SSQU})
        }
        this.$refs.c12.initChart(this.d12);
        for(let m=0;m<res.data.badSumByHY.length;m++){
          this.d4.push({SSHY:res.data.badSumByHY[m].SSHY,hb:res.data.badSumByHY[m].hb,count:res.data.badSumByHY[m].count})
        }
        for(let n=0;n<res.data.badSumByQU.length;n++){
          this.d5.push({SSQU:res.data.badSumByQU[n].SSQU,hb:res.data.badSumByQU[n].hb,count:res.data.badSumByQU[n].count})
        }
        for (let p = 0; p < res.data.mutualByHY.length; p++) {
          this.d14.cLabel.push(res.data.mutualByHY[p].sshy);
          this.d14.cData.push({value:[this.toFix(res.data.mutualByHY[p].sum),res.data.mutualByHY[p].count],name:res.data.mutualByHY[p].sshy}) 
        }
        this.initChart6(this.d14,'c14',1);
        for (let q = 0; q < res.data.mutualByQU.length; q++) {
          this.d15.cLabel.push(res.data.mutualByQU[q].ssqu);
          this.d15.cData.push({value:[this.toFix(res.data.mutualByQU[q].sum),res.data.mutualByQU[q].count],name:res.data.mutualByQU[q].ssqu}) 
        }
        this.initChart6(this.d15,'c15',2);
      })
    },
    initChart6(e,id,val) {
        let chart = echarts.init(document.getElementById(id));
          let option = {
            backgroundColor: '#ffffff',
            title: {
                top: 20,
                text: e.title,
                textStyle: {
                    fontWeight: '600',
                },
            },
            tooltip: {
                trigger: 'item',
                formatter: (data)=>{
                  return data.data.name+":<br/>贷款余额："+this.toFix(data.data.value[0])+"万元<br/>互相担保企业："+data.data.value[1]+"家";
                }
            },
            legend: {
                left: 'center',
                bottom: '50',
                data: e.cLabel
            },
            series: [{
                name: e.sName,
                type: 'pie',
                label: {
                    position: 'inner',
                    show: true,
                    formatter: '{d}%'
                },
                emphasis: {
                    label: {
                        show: true
                    }
                },
                roseType: e.roseType ? 'radius' : '',
                radius: e.seriesRadius || [15, 95],
                center: ['50%', '48%'],
                data: e.cData,
                animationEasing: 'cubicInOut',
                animationDuration: 2000
            }]
          };
          chart.on('click',(param)=>{
            this.initPage();
            this.readOpen = true;
            this.type = param.name;
            if(val == 1){
              this.title = param.name+"业互相担保企业名单"
              this.getMutualGuarantee(param.name)
            }else{
              this.title = param.name+"互相担保企业名单"
              this.getMutualGuarantee(param.name)
            }
          })
          chart.setOption(option);
        

    },
    /* 树状图 */
    treeChart(data){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        series: [
          {
            type: 'tree',
            data: [data],
            top: '10%',
            left: '22%',
            right:'40%',
            symbolSize: 7,
            edgeShape: 'polyline',
            edgeForkPosition: '20%',
            initialTreeDepth: 3,
            lineStyle: {
              width: 1
            },
            label: {
              backgroundColor: '#fff',
              position: 'left',
              verticalAlign: 'middle',
              align: 'right'
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
.border {
  border-left: 1px solid #797979;
}

.h_left {
  .label {
    font-size: 20px;
    font-weight: 600;
    line-height: 40px;
  }

  .history {
    .el-timeline {
      padding-left: 0;
      cursor: pointer;
    }

    /deep/ .el-card__body {
      padding: 10px;
    }
  }

}

.h_right {
  /deep/ .el-tabs__item {
    font-size: 20px;
    font-weight: 600;
  }

  .label {
    line-height: 40px;
  }

  .h_date {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .chart-container {
    height: 450px;
    display: flex;
    align-items: center;
  }

  .data_label {
    margin-top: 15px;
    border-bottom: 1px solid #eaeaea;
  }

}
.dbMsg{
  position: relative;
  height: 600px;
  padding-bottom: 20px;
  .inner{
    position: absolute;
    width: 580px;
    height: 240px;
    top:30px;
    right: 50px;
    z-index: 1000;
    border: 1px solid #000;
    background-color: #fff;
    padding: 20px;
  }
}
.el-table .cell .comName{
  color: #73a0fa;
  text-decoration: underline;
}
.el-table .cell .comName:hover{
  cursor:pointer;
}
.pagination{
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
